<template>
  <div>
    <vue-easy-lightbox
      :teleport="
        useCardListStore.renderValue.position
          ? useCardListStore.renderValue.position
          : 'body'
      "
      :visible="useCardListStore.renderValue.show"
      :imgs="useCardListStore.renderValue.src"
      :escDisabled="false"
      :maskClosable="true"
      :rotateDisabled="false"
      @hide="onHide"
    >
      <template v-slot:loading>
        <div class="w-full h-full flex justify-center items-center">
        </div>
      </template>
      <template v-slot:onerror> 404NotFound </template>
    </vue-easy-lightbox>
  </div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
//这个组件需要接收图片地址,展示的位置,是否展示组件
import useCardList from '@/store/CardList'
const useCardListStore = useCardList()
console.log(useCardListStore.renderValue)

const onHide = () => (useCardListStore.renderValue.show = false)
</script>
